<!-- ------------------登录------------- -->
<template>
	<view class="root">
		<view class="content">
			<view class="titleContent">
				<view class="titleLogin">登录</view>
				<view class="title">
					<view class="isAccount">还没有账号？</view>
					<view class="goReg" @click="regBtn">立即注册</view>
				</view>
			</view>
			<view class="inputContent">
				<input type="text" v-model="phoneNumber" placeholder="请输入手机号" />
				<input type="password" v-model="password" placeholder="请输入登录密码" />
			</view>
			<view class="forgetPwd">
				<text @click="forPwd">忘记密码</text>
			</view>
			<view class="loginBtn" @click="handleLogin">登录</view>
		</view>
	</view>
</template>

<script>
	import { Storage } from "@/static/utils";
	export default {
		data() {
			return {
				phoneNumber: "",
				password: "",
			};
		},

		methods: {
			regBtn() {
				uni.navigateTo({
					url: "/pages/loginReg/reg",
				});
			},
			forPwd() {
				uni.navigateTo({
					url: "/pages/loginReg/forgetPwd",
				});
			},
			handleLogin() {
				if (!this.phoneNumber || !this.password) {
					uni.showToast({
						title: "请检查账号或密码是否输入",
						icon: "none",
					});
					return;
				}

				uni.showToast({ title: "logging in...", icon: "loading" });
				this.$request
					.post("/Home/Login/logincl", {
						account: this.phoneNumber,
						password: this.password,
					})
					.then(({ data }) => {
						uni.hideToast();
						Storage.set("token", data.token);
						uni.switchTab({
							url: "/pages/index/index",
						});
					});
			},
		},
	};
</script>

<style lang="scss">
	.root {
		box-sizing: border-box;
		padding: 99rpx 48rpx 0;

		.titleContent {
			margin-bottom: 40rpx;
			.titleLogin {
				font-size: 48rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				color: #2a62ff;
				line-height: 60rpx;
			}

			.title {
				display: flex;
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				line-height: 60rpx;
				margin-top: 10rpx;

				.isAccount {
					color: #1a1a1a;
				}

				.goReg {
					color: #2a62ff;
				}
			}
		}

		.inputContent {
			input {
				border-bottom: 1rpx solid #d2d2d2;
				display: flex;
				flex-direction: row;
				padding: 60rpx 0 10rpx;
				flex: 1;
			}
		}

		.forgetPwd {
			width: 100%;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #2a62ff;
			line-height: 90rpx;
			text-align: right;
			margin-bottom: 150rpx;
		}

		.loginBtn {
			width: 100%;
			height: 80rpx;
			background: #2a62ff;
			border-radius: 10rpx;
			font-size: 34rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>
